<template>
  <div
    class="zui-img"
    @click="handleClick"
    :class="[
      { 'zui-img--inline': inline }
    ]"
    :style="{
      'width': width || size,
      'height': height || size,
      'border-radius': borderRadius
    }"
    v-lazy:background-image="((mode === 'background-image' && src) ? src : '')">
    <img v-lazy="src" v-if="mode === 'img' && src">
    <slot></slot>
  </div>
</template>

<script>
/**
 * z-image
 * @module common/z-image, 依赖vue-lazyload组件
 * @desc 图片组件
 *
 * @param { string } mode = img, 图片类型, 可选值img/background-image, 默认为img, background-image模式下，图片宽高必填
 * @param { string } src = src, 图片资源url
 * @param { boolean } inline, 是否为inline样式
 * @param { string } width = 200px, 图片宽度
 * @param { string } height = 200px, 图片高度
 * @param { string } size = 200px, 图片大小, width/height和size同时存在, 以width/height单独设置为准
 * @param { string } border-radius = 2px, 图片边角弧度
 * @param { string } border = dark, 图片边框, 可选值dark/light
 */
export default {
  name: 'z-image',
  componentName: 'z-image',
  methods: {
    handleClick (evt) {
      this.$emit('click', evt)
    }
  },
  props: {
    mode: {
      type: String,
      default: 'background-image',
      validator (value) {
        return [
          'img',
          'background-image'
        ].indexOf(value) > -1
      }
    },
    src: String,
    inline: Boolean,
    width: String,
    height: String,
    size: String,
    borderRadius: String,
    border: {
      type: String,
      validator (value) {
        return [
          'light',
          'dark'
        ].indexOf(value) > -1
      }
    }
  }
}
</script>

<style lang="less">
@import "../z-theme/_variable.less";

.zui-img {
  flex: none;
  position: relative;
  display: inline-flex;
  width: 100%;
  height: 100%;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: @--background-color-base;
  // transition: @--all-transition;
  vertical-align: top;
  overflow: hidden;
  font-size: 0;

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
}

.zui-img--inline {
  display: inline-flex;
}

img[lazy=loading] {
  width: 100%;
  height: 100%;
  opacity: 0;
}

img[lazy=loaded] {
  transition: @--all-transition;
}

div[lazy=loading] {
  background-color: @--background-color-base;
  width: 100%;
  height: 100%;
}

div[lazy=loaded] {
  transition: @--all-transition;
}
</style>
